<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
</head>
<body>


<div id="app">

    <el-row class="demo-autocomplete">
        <el-col :span="2">统计方式:</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="state1"
                    size="small"
                    placeholder="请输入内容"
            ></el-autocomplete>
        </el-col>
        <el-col :span="2"> 统计日期:</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="state2"
                    size="small"
                    placeholder="请输入内容"
                    :trigger-on-focus="true"
            ></el-autocomplete>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="">查询</el-button>
            <el-button type="primary" size="small">导入<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-col>
    </el-row>


<template>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="日期" width="180"></el-table-column>
            <el-table-column prop="loanAmount" label="姓名" width="180"></el-table-column>
            <el-table-column prop="loanOrderAmount" label="地址"></el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>

</template>
</div>
<script>



    let app=new Vue({
        el:'#app',
        data() {

                return {

                    restaurants: [],
                    state1: '',
                    state2: '',
                    // 总数据
                    tableData:[],
                    // 默认显示第几页
                    currentPage:1,
                    // 总条数，根据接口获取数据长度(注意：这里不能为空)
                    totalCount:1,
                    // 个数选择器（可修改）
                    pageSizes:[1,2,3,4],
                    // 默认每页显示的条数（可修改）
                    PageSize:1,
                }

        },
        methods:{
            getData(){
                // 这里使用axios，使用时请提前引入
                axios.get("fin/page",{
                    params:{
                            limit:10,
                            pageNum:this.currentPage,
                        }
                    },{emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse=>{

                  console.log(reponse)
                    // 将数据赋值给tableData
                    this.tableData=reponse.data.rows
                    // 将数据的长度赋值给totalCount
                    this.totalCount=reponse.data.total
                })
            },
            // 分页
            // 每页显示的条数
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize=val
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
                this.getData()
            },
        },
        created:function(){
            alert("aaa")
            this.getData()

        }
    })
</script>

</body>
</html>